{% extends 'layout.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
    <style>
        .highlight-text {
            font-weight: 1000;
            font-size: 16px;
            color: #c9302c;
        }

        p {
            font-size: 14px;
            text-indent: 2em;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid" style="margin-top: 10px">
        <div>
            <div class="input-group" style="width: 300px;">
                <span class="input-group-addon">日期范围</span>
                <input id="rangePicker" type="text" class="form-control">
            </div>
        </div>

        <div class="row" style="margin-top: 20px;">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i> 威胁IP统计
                    </div>
                    <div class="panel-body">
                        <div id="attackIp" style="height: 300px;"></div>
                    </div>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i> 瑞数攻击类型统计(Top10)
                    </div>
                    <div class="panel-body">
                        <div id="attackType" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i> 瑞数漏洞攻击类型统计(Top10)
                    </div>
                    <div class="panel-body">
                        <div id="injectType" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i> 瑞数报警类型统计(Top10)
                    </div>
                    <div class="panel-body">
                        <div id="warningType" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i> 威胁来源统计(Top20)
                    </div>
                    <div class="panel-body">
                        <div id="location" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i> 瑞数Nday类型统计(Top10)
                    </div>
                    <div class="panel-body">
                        <div id="ndayType" style="height: 300px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i> 高级自动化工具统计(Top10)
                    </div>
                    <div class="panel-body">
                        <div id="botType" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i> 深信服防火墙报警类型统计(Top10)
                    </div>
                    <div class="panel-body">
                        <div id="sangforAttackType" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i> 天眼报警类型统计(Top10)
                    </div>
                    <div class="panel-body">
                        <div id="skyeyeWarningType" style="height: 300px;"></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-navicon" aria-hidden="true"></i> 外服网威胁统计
                    </div>
                    <div class="panel-body">
                        <div>
                            <div id="text-container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    </div>
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/daterangepicker/moment.min.js' %}"></script>
    <script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}"></script>
    <script src="{% static 'plugins/highcharts/highcharts.js' %}"></script>
    <script src="{% static 'plugins/highcharts/highcharts-3d.js' %}"></script>
    <script src="{% static 'plugins/highcharts/exporting.js' %}"></script>
    <script>
        var ATTACKIP_API = "{% url 'statistics_attackip' %}";
        var BOTGATE_ATTACKTYPE_API = "{% url 'statistics_attacktype' %}";
        var BOTGATE_INJECTATTACKTYPE_API = "{% url 'statistics_injectattacktype' %}";
        var BOTGATE_WARNINGTYPE_API = "{% url 'statistics_warningtype' %}";
        var BOTGATE_NDAYTYPE_API = "{% url 'statistics_ndaytype' %}";
        var BOTGATE_BOTTYPE_API = "{% url 'statistics_bottype' %}";
        var BOTGATE_LOCATION_API = "{% url 'statistics_location' %}";
        var SKYEYE_WARNINGTYPE_API = "{% url 'statistics_skyeye_warningtype' %}";
        var SANGFOR_ATTACKTYPE_API = "{% url 'statistics_sangforfw_attacktype' %}";
        var STATISTIC_ACCOUNT_API = "{% url 'statistics_account' %}";
        $(function () {
            initDateRangePicker();
            attackIp(moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD'));
            botgateAttackType(moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD'));
            botgateInjectAttackType(moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD'));
            botgateWarningType(moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD'));
            botgateNdayType(moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD'));
            botgateBotType(moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD'));
            botgateLocation(moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD'));
            skyeyeWarningType(moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD'));
            sangforAttackType(moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD'));
            statisticsAccount(moment().format('YYYY-MM-DD'), moment().add(1, 'days').format('YYYY-MM-DD'));
        });

        function initDateRangePicker() {
            var options = {
                maxDate: moment(),
                alwaysShowCalendars: true,
                showWeekNumbers: true,
                ranges: {
                    '今天': [moment(), moment()],
                    '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '最近7天': [moment().subtract(6, 'days'), moment()],
                    '最近30天': [moment().subtract(29, 'days'), moment()],
                    '本月': [moment().startOf('month'), moment().endOf('month')]
                },
                locale: {
                    format: 'YYYY-MM-DD',
                    separator: ' 至 ',
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '开始',
                    toLabel: '结束',
                    customRangeLabel: '自定义',
                    weekLabel: 'W',
                    daysOfWeek: ['日','一', '二', '三', '四', '五', '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    firstDay: 1
                }
            };

            $('#rangePicker').daterangepicker(options, function (start, end, label) {
                start_date = start.format('YYYY-MM-DD')
                end_date = end.add(1, 'days').format('YYYY-MM-DD')
                // 选择了时间之后，函数自动被触发。
                statisticsAccount(start_date, end_date);
                attackIp(start_date, end_date);
                botgateAttackType(start_date, end_date);
                botgateInjectAttackType(start_date, end_date);
                botgateWarningType(start_date, end_date);
                botgateNdayType(start_date, end_date);
                botgateBotType(start_date, end_date);
                botgateLocation(start_date, end_date);
                skyeyeWarningType(start_date, end_date);
                sangforAttackType(start_date, end_date);

            });
        }

        function botgateInjectAttackType(start, end) {
            var config = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                xAxis: {
                    categories: ['信息技术所', '科信部', '运输部']
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: '攻击数量(TOP10)'
                    },
                    stackLabels: {  // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>'
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    },
                },
                series: [{
                    name: '高危',
                    data: [5, 3, 4]
                }, {
                    name: '中危',
                    data: [2, 2, 3]
                }, {
                    name: '低危',
                    data: [3, 4, 4]
                }]
            };
            $.ajax({
                url: BOTGATE_INJECTATTACKTYPE_API,
                type: "GET",
                data: {start: start, end: end},
                dataType: "JSON",
                success: function (res) {
                    config.xAxis.categories = res.data.categories;
                    config.series = res.data.series;
                    Highcharts.chart('injectType', config);

                }
            })
        }

        function botgateAttackType(start, end) {
            var config = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                xAxis: {
                    categories: ['信息技术所', '科信部', '运输部']
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: '攻击数量(TOP10)'
                    },
                    stackLabels: {  // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>'
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: '高危',
                    data: [5, 3, 4]
                }, {
                    name: '中危',
                    data: [2, 2, 3]
                }, {
                    name: '低危',
                    data: [3, 4, 4]
                }]
            };
            $.ajax({
                url: BOTGATE_ATTACKTYPE_API,
                type: "GET",
                data: {start: start, end: end},
                dataType: "JSON",
                success: function (res) {
                    config.xAxis.categories = res.data.categories;
                    config.series = res.data.series;
                    Highcharts.chart('attackType', config);

                }
            })
        }

        function botgateWarningType(start, end) {
            var config = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                xAxis: {
                    categories: ['信息技术所', '科信部', '运输部']
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: '告警数量(TOP10)'
                    },
                    stackLabels: {  // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>'
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: '高危',
                    data: [5, 3, 4]
                }, {
                    name: '中危',
                    data: [2, 2, 3]
                }, {
                    name: '低危',
                    data: [3, 4, 4]
                }]
            };
            $.ajax({
                url: BOTGATE_WARNINGTYPE_API,
                type: "GET",
                data: {start: start, end: end},
                dataType: "JSON",
                success: function (res) {
                    config.xAxis.categories = res.data.categories;
                    config.series = res.data.series;
                    Highcharts.chart('warningType', config);

                }
            })
        }

        function botgateNdayType(start, end) {
            var config = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                xAxis: {
                    categories: ['信息技术所', '科信部', '运输部']
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: '告警数量(TOP10)'
                    },
                    stackLabels: {  // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>'
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: '高危',
                    data: [5, 3, 4]
                }, {
                    name: '中危',
                    data: [2, 2, 3]
                }, {
                    name: '低危',
                    data: [3, 4, 4]
                }]
            };
            $.ajax({
                url: BOTGATE_NDAYTYPE_API,
                type: "GET",
                data: {start: start, end: end},
                dataType: "JSON",
                success: function (res) {
                    config.xAxis.categories = res.data.categories;
                    config.series = res.data.series;
                    Highcharts.chart('ndayType', config);

                }
            })
        }

        function botgateBotType(start, end) {
            var config = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                xAxis: {
                    categories: ['信息技术所', '科信部', '运输部']
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: '告警数量(TOP10)'
                    },
                    stackLabels: {  // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>'
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: '高危',
                    data: [5, 3, 4]
                }, {
                    name: '中危',
                    data: [2, 2, 3]
                }, {
                    name: '低危',
                    data: [3, 4, 4]
                }]
            };
            $.ajax({
                url: BOTGATE_BOTTYPE_API,
                type: "GET",
                data: {start: start, end: end},
                dataType: "JSON",
                success: function (res) {
                    config.xAxis.categories = res.data.categories;
                    config.series = res.data.series;
                    Highcharts.chart('botType', config);

                }
            })
        }

        function botgateLocation(start, end) {
            var config = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                xAxis: {
                    categories: ['信息技术所', '科信部', '运输部']
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: '告警数量(TOP20)'
                    },
                    stackLabels: {  // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>'
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: '高危',
                    data: [5, 3, 4]
                }, {
                    name: '中危',
                    data: [2, 2, 3]
                }, {
                    name: '低危',
                    data: [3, 4, 4]
                }]
            };
            $.ajax({
                url: BOTGATE_LOCATION_API,
                type: "GET",
                data: {start: start, end: end},
                dataType: "JSON",
                success: function (res) {
                    config.xAxis.categories = res.data.categories;
                    config.series = res.data.series;
                    Highcharts.chart('location', config);

                }
            })
        }

        function skyeyeWarningType(start, end) {
            var config = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                xAxis: {
                    categories: ['信息技术所', '科信部', '运输部']
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: '告警数量'
                    },
                    stackLabels: {  // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'center',
                    verticalAlign: 'top'

                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>'
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: '高危',
                    data: [5, 3, 4]
                }, {
                    name: '中危',
                    data: [2, 2, 3]
                }, {
                    name: '低危',
                    data: [3, 4, 4]
                }]
            };
            $.ajax({
                url: SKYEYE_WARNINGTYPE_API,
                type: "GET",
                data: {start: start, end: end},
                dataType: "JSON",
                success: function (res) {
                    config.xAxis.categories = res.data.categories;
                    config.series = res.data.series;
                    Highcharts.chart('skyeyeWarningType', config);

                }
            })
        }

        function sangforAttackType(start, end) {
            var config = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                xAxis: {
                    categories: ['信息技术所', '科信部', '运输部']
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: '告警数量'
                    },
                    stackLabels: {  // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'center',
                    verticalAlign: 'top'

                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>'
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: '高危',
                    data: [5, 3, 4]
                }, {
                    name: '中危',
                    data: [2, 2, 3]
                }, {
                    name: '低危',
                    data: [3, 4, 4]
                }]
            };
            $.ajax({
                url: SANGFOR_ATTACKTYPE_API,
                type: "GET",
                data: {start: start, end: end},
                dataType: "JSON",
                success: function (res) {
                    config.xAxis.categories = res.data.categories;
                    config.series = res.data.series;
                    Highcharts.chart('sangforAttackType', config);

                }
            })
        }

        function attackIp(start, end) {
            var config = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                xAxis: {
                    categories: [
                        '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                    ],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '威胁IP数量'
                    },
                    stackLabels: {  // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'center',
                    verticalAlign: 'top'

                },
                tooltip: {
                    // head + 每个 point + footer 拼接成完整的 table
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: '东京',
                    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }, {
                    name: '纽约',
                    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
                }, {
                    name: '伦敦',
                    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
                }, {
                    name: '柏林',
                    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
                }]
            };
            // Highcharts.chart('projectUser', config);
            $.ajax({
                url: ATTACKIP_API,
                type: "GET",
                data: {start: start, end: end},
                dataType: "JSON",
                success: function (res) {
                    config.xAxis.categories = res.data.categories;
                    config.series = res.data.series;
                    Highcharts.chart('attackIp', config);

                }
            })
        }

        function statisticsAccount(start, end) {
            $.ajax({
                url: STATISTIC_ACCOUNT_API,
                type: "GET",
                data: {start: start, end: end},
                dataType: "JSON",
                success: function (res) {
                    $("#text-container").html(res.data)
                }
            })
        }
    </script>

{% endblock %}